<!-- ---
layout: default
title: 视图
slug: views
lead: "常用视图."
base_url: "./"
--- -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ZUI，一个简单灵活的前端框架。">
  <meta name="author" content="Zentao">

  <title>ZUI - 开源HTML5跨屏框架</title>

  <link href="css/zui.min.css" rel="stylesheet">
  <link href="../dist/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
  <link href="../dist/lib/chosen/chosen.min.css" rel="stylesheet">
  <link href="css/doc.css" rel="stylesheet">

  <!--[if lt IE 9]>
  <script src="../assets/html5shiv.js"></script>
  <script src="../assets/respond.js"></script>
  <![endif]-->
</head>
<body class="doc-views">
  <header data-tab="views">
  </header>
  <div id="main">
    <div class="page-header">
      <h1>视图</h1>
      <small>数据表格、文章、卡片、列表、评论...</small>
<!--       <div class="conent">
        <div class='content-collapse'>
          <div class="row">
          </div>
        </div>
        <a class="btn-fold" href="javascript:;"><i class="icon-chevron-down"></i></a>
      </div> -->
    </div>

    <section id="datatable" data-version='1.2'>
      <div class="page-header">
        <h2>数据表格</h2>
      </div>
      <p>数据表格插件是一个展示大量数据的强力工具。</p>
      <h3>实例</h3>
      <p>在下面的例子中，表格左侧5列和右侧两列分别固定在两侧，其宽度不受外部容器宽度影响，中间位置的列则在宽度不够时会隐藏超出的部分，隐藏的列可以通过拖拽表头移动到可视区域，也可以使用下方的滚动条来调整隐藏的列显示区域。当向下滚动页面时，如果表头一旦处于不可见的位置时，则表头会调整样式而固定在页面顶端保持一直可见。</p>
      <div class="example">
        <div class="datatable"></div>
      </div>
<pre class='prettyprint'><code>&lt;!-- HTML 代码 --&gt;
&lt;table class=&quot;table datatable&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;#&lt;/th&gt;
      &lt;th&gt;时间&lt;/th&gt;
      ...
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    &lt;tr&gt;...&lt;/tr&gt;
    ...
  &lt;/tbody&gt;
&lt;/table&gt;


/* JS 代码 */
$(&#39;table.datatable&#39;).datatable();
</code></pre>

      <h4>启用排序</h4>
      <p>只需要更改一个参数即可启用数据排序功能。DataTable支持对数字、日期或字符串进行升序和降序排序。</p>
      <div class="example">
        <div class="datatable" data-sortable='true'></div>
      </div>
<pre class='prettyprint'><code>/* JS 代码 */
$(&#39;table.datatable&#39;).datatable({sortable: true});
</code></pre>

      <h4>选中行</h4>
      <p>启用该选项后，单击行会更改选中与非选中状态。</p>
      <div class="example">
        <div class="datatable" data-checkable='true'></div>
      </div>
<pre class='prettyprint'><code>/* JS 代码 */
$(&#39;table.datatable&#39;).datatable({checkable: true});
</code></pre>

<!--       <h4>自定义列宽</h4>
      <p>允许你拖拽表头边缘来更改列宽。</p>
      <div class="example">
        <div class="datatable" data-customizable='true'></div>
      </div>
<pre class='prettyprint'><code>/* JS 代码 */
$(&#39;table.datatable&#39;).datatable({customizable: true});
</code></pre> -->

      <!-- <h4>更多选项</h4> -->

      <h4>综合示例</h4>
      <p>你可以启用所有增强选项。</p>
      <div class="example">
        <div class="datatable" data-checkable='true' data-sortable='true'></div>
      </div>
<pre class='prettyprint'><code>/* JS 代码 */
$(&#39;table.datatable&#39;).datatable({checkable: true, sortable: true});
</code></pre>

      <h3>用法</h3>
      <h4>启动参数</h4>
      <table class="table-bordered table">
        <thead>
          <th>参数</th>
          <th>可选值</th>
          <th>说明</th>
        </thead>
        <tbody>
          <tr>
            <td><code>checkable</code></td>
            <td>
              <ul>
                <li><code>false</code> (默认)</li>
                <li><code>true</code></li>
              </ul>
            </td>
            <td>是否启用行选中状态维护，启用后将在列首显示多选按钮</td>
          </tr>
          <tr>
            <td><code>checkByClickRow</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>
              <p>是否点击行的任意位置来切换选中状态</p>
              <p>仅在<code>checkable</code>选项为<code>true</code>时生效</p>
            </td>
          </tr>
          <tr>
            <td><code>checkedClass</code></td>
            <td>字符串，默认为<code>"active"</code></td>
            <td>
              <p>行选中时，为表格中的<code>&lt;tr&gt;</code>标签增加的类名由该参数指定</p>
              <p>仅在<code>checkable</code>选项为<code>true</code>时生效</p>
            </td>
          </tr>
          <tr>
            <td><code>storage</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>是否启用本地存储来增强用户体验。启用该选项之后，表格排序状态及选中的行在用户刷新页面之后仍然会还原为之前的扎状态。</td>
          </tr>
          <tr>
            <td><code>sortable</code></td>
            <td>
              <ul>
                <li><code>false</code> (默认)</li>
                <li><code>true</code></li>
              </ul>
            </td>
            <td>是否启用表格排序，点击表头能够以该列来为数据排序</td>
          </tr>
          <tr>
            <td><code>fixedHeader</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>是否固定表格头部，如果启用当页面滚动到下方导致表头不可见时重新定位表头到页面顶部保持可见</td>
          </tr>
          <tr>
            <td><code>fixedHeaderOffset</code></td>
            <td>数字，默认值为<code>0</code></td>
            <td>
              <p>当标题固定时距离顶部的高度，当页面顶部包含其他固定的内容时需要调整该值</p>
              <p>仅在<code>fixedHeaderOffset</code>选项为<code>true</code>时生效</p>
            </td>
          </tr>
          <tr>
            <td><code>fixedLeftWidth</code></td>
            <td>数字或者表示百分比的字符串，默认值为<code>"30%"</code></td>
            <td>左侧固定的所有列的宽度，可以指定为百分比</td>
          </tr>
          <tr>
            <td><code>fixedRightWidth</code></td>
            <td>数字或者表示百分比的字符串，默认值为<code>"30%"</code></td>
            <td>右侧固定的所有列的宽度，可以指定为百分比</td>
          </tr>
          <tr>
            <td><code>flexHeadDrag</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>是否能够通告拖拽可变区域的头部来调整可见区域</td>
          </tr>
          <tr>
            <td><code>scrollPos</code></td>
            <td>
              <ul>
                <li><code>'in'</code> (默认)</li>
                <li><code>'out'</code></li>
              </ul>
            </td>
            <td>滚动条位置</td>
          </tr>
          <tr>
            <td><code>rowHover</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>是否在行上启用鼠标悬停样式</td>
          </tr>
          <tr>
            <td><code>colHover</code></td>
            <td>
              <ul>
                <li><code>false</code></li>
                <li><code>true</code> (默认)</li>
              </ul>
            </td>
            <td>是否在列上启用鼠标悬停样式，仅当鼠标悬停表头时生效</td>
          </tr>
<!--           <tr>
            <td><code>customizable</code></td>
            <td>
              <ul>
                <li><code>false</code> (默认)</li>
                <li><code>true</code></li>
              </ul>
            </td>
            <td>是否能够通过拖拽表头边缘来更改列宽</td>
          </tr> -->
          <tr>
            <td><code>minColWidth</code></td>
            <td>数字，默认为<code>20</code></td>
            <td>列的最小宽度</td>
          </tr>
          <tr>
            <td><code>minFixedLeftWidth</code></td>
            <td>数字，默认为<code>200</code></td>
            <td>左侧所有固定列的最小宽度</td>
          </tr>
          <tr>
            <td><code>minFixedRightWidth</code></td>
            <td>数字，默认为<code>200</code></td>
            <td>右侧所有固定列的最小宽度</td>
          </tr>
          <tr>
            <td><code>minFlexAreaWidth</code></td>
            <td>数字，默认为<code>200</code></td>
            <td>中间可变区域最小宽度</td>
          </tr>
        </tbody>
      </table>
<pre class='prettyprint'><code>/* JS 代码 */
$(&#39;table.datatable&#39;).datatable(
{
    checkable: true,
    sortable: true,
    checkedClass: "checked",
    minFixedLeftWidth: 300
    // 更多参数...
});
</code></pre>
      <p>启动参数也可以直接使用<code>data-*</code>属性写在要增强的HTML标签上。</p>

      <h4>事件</h4>
      <p>Datatable中的事件既可以使用jQuery原生方法来绑定，也可以写在启动参数中。</p>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>事件名称</th>
            <th>jQuery事件名称</th>
            <th>说明</th>
            <th>事件参数</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>afterLoad</code></td>
            <td><code>"afterLoad.zui.datatable"</code></td>
            <td>数据加载完毕后调用</td>
            <td>
              <ul>
                <li><code>event.data</code> 表格数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>ready</code></td>
            <td><code>"ready.zui.datatable"</code></td>
            <td>渲染完毕后调用，可以在此事件中为DOM绑定其他事件</td>
            <td>无</td>
          </tr>
          <tr>
            <td><code>sort</code></td>
            <td><code>"sort.zui.datatable"</code></td>
            <td>表格重新排序之后</td>
            <td>
              <ul>
                <li><code>event.sorter.index</code> 数字，排序所依据的列序号</li>
                <li><code>event.sorter.sortUp</code> 排序方向，<code>true</code>为升序，<code>false</code> 为降序</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>sizeChanged</code></td>
            <td><code>"sizeChanged.zui.datatable"</code></td>
            <td>列宽发生更改时发生</td>
            <td>
              <ul>
                <li><code>event.changes.change</code> 字符串，变化的类型，<code>"fixedLeftWidth"</code> 为左侧所有固定列总宽度发生变化，<code>"fixedRightWidth"</code> 为右侧所有固定列总宽度发生变化，<code>"colWidth"</code> 为单个列宽度发生变化</li>
                <li><code>event.changes.oldWidth</code> 数字，发生变化之前的宽度值</li>
                <li><code>event.changes.newWidth</code> 数字，新的宽度值</li>
                <li><code>event.changes.colIndex</code> 数字，如果是单个列宽发生变化，则该值指示发生变化列的序号</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>checksChanged</code></td>
            <td><code>"checksChanged.zui.datatable"</code></td>
            <td>当行的选中状态发生变化时发生</td>
            <td>
              <ul>
                <li><code>event.checks.checkedAll</code> 如果为<code>true</code> 标识当前所有行都被选中，反之则表示至少有一行为被选中</li>
                <li><code>event.checks.checks</code> 数字数组，包含所有已选中的行的ID</li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
      <h5>使用启动参数处理事件</h5>
<pre class='prettyprint'><code>$(&#39;table.datatable&#39;).datatable(
{
    sort: function(event)
    {
        console.log(event);
        // console.log("表格已重新排序！");
        // 处理 sort 事件
        // ...
    }
});</code></pre>
      <h5>使用jQuery方法绑定事件处理函数</h5>
<pre class='prettyprint'><code>$(&#39;table.datatable&#39;).datatable().on("sort.zui.datatable", function(event)
{
    console.log(event);
    // console.log("表格已重新排序！");
    // 处理 sort 事件
    // ...
});</code></pre>

      <h3>数据</h3>
      <h4>增强现有表格</h4>
      <p>直接对一个包含完整头部和数据的普通表格进行增强。DataTable或自动获取所有表头和行上的数据，并配置相关选项。</p>
      <p>增强现有的表格能够在DataTable组件不可用时也能够正常显示原表格数据。</p>

      <h4>在启动选项中初始化数据</h4>
      <p>通过设置启动选项的<code>data</code>属性来初始化数据。</p>

      <h4>更新数据</h4>
      <p>当数据表格所依据的原始数据发生变更时，需要手动调用<code>load</code>方法来更新数据表格。</p>
<pre class='prettyprint'><code>// 当原始数据发生变更时：
$(&#39;table.datatable&#39;).datatable('load');</code></pre>
    </section>

    <section id="calendar" data-version='1.2'>
      <div class="page-header">
        <h2>日历</h2>
      </div>
      <p>在日历上能够让用户直观了解日常安排并进行规划。ZUI提供了实用简单的日历插件。</p>
      <h3>实例</h3>
      <p>在下面的示例中展示了按月展示的日程安排。点击日历上方的操作按钮切换月份，拖动日历中的事件到其他位置来重新安排时间。</p>
      <p>按周或查看某一天的日程视图将在后续版本中到来。</p>
      <div class="example">
        <div class="calendar" id="calendarExample"></div>
      </div>
<pre class='prettyprint'><code>&lt;!-- HTML 代码 --&gt;
&lt;div id=&quot;calendar&quot; class=&quot;calendar&quot;&gt;&lt;/div&gt;

/* JS 代码 */
$(&#39;#calendar&#39;).calendar();
</code></pre>

      <h3>使用方法</h3>
      <h4>启动参数</h4>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>参数</th>
            <th>值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>startView</code></td>
            <td>
              <ul>
                <li><code>"month"</code> (默认)，月份视图</li>
              </ul>
            </td>
            <td>起始视图，默认为月份视图</td>
          </tr>
          <tr>
            <td><code>startDate</code></td>
            <td>
              <ul>
                <li><code>"today"</code> (默认)，其实日期为当天</li>
                <li><code>"2014-8-14"</code>，表示日期的字符串</li>
                <li>一个<code>Date</code>实例</li>
              </ul>
            </td>
            <td>起始视图所在的日期</td>
          </tr>
          <tr>
            <td><code>limitEventTitle</code></td>
            <td>
              <ul>
                <li><code>true</code> (默认)</li>
                <li><code>false</code></li>
              </ul>
            </td>
            <td>是否限制事件标题长度，如果为<code>true</code>则会限制事件标题在一行显示，超出部分将隐藏</td>
          </tr>
          <tr>
            <td><code>storage</code></td>
            <td>
              <ul>
                <li><code>true</code> (默认)</li>
                <li><code>false</code></li>
              </ul>
            </td>
            <td>是否启用本地存储来增强体验，如果为<code>ture</code>则会记录用户所在的视图和日期，刷新或关闭浏览器再次访问会重现最后的视图</td>
          </tr>
          <tr>
            <td><code>withHeader</code></td>
            <td>
              <ul>
                <li><code>true</code> (默认)</li>
                <li><code>false</code></li>
              </ul>
            </td>
            <td>是否显示带操作栏的头部，如果为<code>true</code>则会显示头部，包含切换视图或日期的按钮</td>
          </tr>
          <tr>
            <td><code>dragThenDrop</code></td>
            <td>
              <ul>
                <li><code>true</code> (默认)</li>
                <li><code>false</code></li>
              </ul>
            </td>
            <td>是否启用事件拖放功能，如果为<code>true</code>则能够拖拽一个事件到另一个日期方框内来更改事件日程</td>
          </tr>
          <tr>
            <td><code>lang</code></td>
            <td>
              <ul>
                <li><code>null</code> (默认)</li>
                <li><code>"zh-cn"</code></li>
              </ul>
            </td>
            <td>当前界面所使用的语言，如果留空则会从<code>html</code>标签上读取lang属性</td>
          </tr>
          <tr>
            <td><code>data</code></td>
            <td>
              <code>{calendars: {}, events: []}</code>
            </td>
            <td>初始加载的日历数据</td>
          </tr>
        </tbody>
      </table>

      <h4>方法</h4>
      <p>日历插件提供一组方法来向日历添加新的时间、更改已有事件或者删除已有事件。</p>

      <h5>获取日历对象实例</h5>
      <p>要使用日历对象方法，需要首先获取日历对象实例。每一个日历对象示例的引用都存储在对应的jQuery对象的data中，名称为<code>zui.calendar</code>。</p>
<pre class='prettyprint'><code>/* 获取日历对象实例 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
</code></pre>

      <h5>切换或刷新视图</h5>
      <p>要切换不同的视图或所显示的日期范围，请使用日历对象的<code>display(view, date)</code>方法。</p>
<pre class='prettyprint'><code>/* 切换视图或刷新视图 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
calendar.display('month', '2014-8-14');   // 切换视图为月份视图，并将日期范围限定为2014年8月
calendar.display('month');                // 切换视图为月份视图，使用当前日期范围
calendar.display();                       // 重新刷新当前视图
</code></pre>

      <h5>增加事件</h5>
      <h6>增加一个事件</h6>
      <p>将一个新的事件对象作为参数来调用<code>addEvents</code>方法。</p>
<pre class='prettyprint'><code>/* 增加一个事件 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
var newEvent = {title: '吃饭了', desc: '要吃更多', start: '2014-8-14 12:00', end: '2014-8-14 13:00'};
calendar.addEvents(newEvent);
</code></pre>
      <h6>增加多个事件</h6>
      <p>将包含一组事件的数组作为参数调用<code>addEvents</code>方法则可以一次性添加多个事件。</p>
<pre class='prettyprint'><code>/* 增加多个事件 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
var newEvents =
[
  {title: '吃饭了', desc: '要吃更多', start: '2014-8-14 12:00', end: '2014-8-14 13:00'},
  {title: '学习了', desc: '要学更多', start: '2014-8-14 13:00', end: '2014-8-14 17:00'}
];
calendar.addEvents(newEvents);
</code></pre>
      <h6>事件对象</h6>
      事件对象实例可以指定以下属性：
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>title</code></td>
            <td>字符串</td>
            <td>事件标题</td>
          </tr>
          <tr>
            <td><code>desc</code></td>
            <td>字符串， 可选</td>
            <td>事件描述</td>
          </tr>
          <tr>
            <td><code>allDay</code></td>
            <td>
              <ul>
                <li><code>true</code></li>
                <li><code>false</code> (默认)</li>
              </ul>
            </td>
            <td>是否为全天事件</td>
          </tr>
          <tr>
            <td><code>start</code></td>
            <td>
              <ul>
                <li><code>"2014-8-14"</code>，表示日期的字符串</li>
                <li>一个<code>Date</code>实例</li>
              </ul>
            </td>
            <td>事件开始的时间</td>
          </tr>
          <tr>
            <td><code>end</code></td>
            <td>
              <ul>
                <li><code>"2014-8-14"</code>，表示日期的字符串</li>
                <li>一个<code>Date</code>实例</li>
              </ul>
            </td>
            <td>事件结束的时间，如果<code>allDay</code>属性为<code>true</code>(即为全天事件)时该属性可选</td>
          </tr>
          <tr>
            <td><code>calendar</code></td>
            <td>字符串，可选</td>
            <td>事件所在的日历</td>
          </tr>
          <tr>
            <td><code>data</code></td>
            <td>任何值</td>
            <td>一个额外的属性用来存储其他与该事件关联的数据</td>
          </tr>
        </tbody>
      </table>

      <h5>移除事件</h5>
      <p>指定需要移除的事件的<code>id</code>属性，或者同时指定多个<code>id</code>并放在一个数组中作为参数来调用<code>removeEvents</code>方法。</p>
<pre class='prettyprint'><code>/* 移除事件 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
calendar.removeEvents('4343');                   // 移除id为4343的事件
calendar.removeEvents(['4343', '4344', '4345']); // 一次性移除多个事件
</code></pre>

      <h5>更新事件</h5>
      <h6>更新事件属性</h6>
      <p>将更新对象或者由包含更新对象的数组作为参数来调用方法<code>updateEvents</code>。</p>
<pre class='prettyprint'><code>/* 移除事件 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
calendar.updateEvents(    // 更新一个事件
{
    event: '343', // 要更新的事件
    changes:
    [
       {
          change: 'title',          // 要更改的属性名称,
          to:     '一个新的事件标题'  // 更改后的值
       },
       {                            // 同时更改另一个属性
          change: 'start',          // 要更改的属性名称,
          to:     '2014-8-15 9:00'  // 更改后的值
       }
    ]
});
calendar.updateEvents(    // 一次性更新多个事件
[
    {
        event: '343', // 更新第一个事件
        changes:
        [
           {
              change: 'title',          // 要更改的属性名称,
              to:     '一个新的事件标题'  // 更改后的值
           },
           {                            // 同时更改另一个属性
              change: 'start',          // 要更改的属性名称,
              to:     '2014-8-15 9:00'  // 更改后的值
           }
        ]
    },
    {
        event: '344', // 更新另一个事件
        changes:
        [
            // ...
        ]
    },
]);
</code></pre>

      <h5>增加日历</h5>
      <h6>增加一个日历</h6>
      <p>将一个新的日历对象作为参数来调用<code>addCalendars</code>方法。</p>
<pre class='prettyprint'><code>/* 增加一个日历 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
var newCalendar = {name: 'work', title: '工作', desc: '这是一个工作日历', color: '#ff0000'};
calendar.addCalendars(newCalendar);
</code></pre>
      <h6>增加多个日历</h6>
      <p>将包含一组日历的数组作为参数调用<code>addCalendars</code>方法则可以一次性添加多个日历。</p>
<pre class='prettyprint'><code>/* 增加多个日历 */
var calendar = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
var newCalendars =
[
  {name: 'work', title: '工作', desc: '这是一个工作日历', color: '#ff0000'},
  {name: 'home', title: '家庭', desc: '这是一个家庭日历', color: '#00ff00'}
];
calendar.addCalendars(newCalendars);
</code></pre>
      <h6>日历对象</h6>
      日历对象实例可以指定以下属性：
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>属性</th>
            <th>值</th>
            <th>说明</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>name</code></td>
            <td>字符串，为全英文标识</td>
            <td>日历名称</td>
          </tr>
          <tr>
            <td><code>title</code></td>
            <td>字符串，可选</td>
            <td>日历标题</td>
          </tr>
          <tr>
            <td><code>desc</code></td>
            <td>字符串， 可选</td>
            <td>日历描述</td>
          </tr>
          <tr>
            <td><code>color</code></td>
            <td>表示十六进制颜色值的字符串，可选</td>
            <td>日历颜色</td>
          </tr>
        </tbody>
      </table>

      <h5>获取和同步数据</h5>
      <p>当进行日历事件的添加、更新或者移除操作时注意同步数据。</p>
      <p>你随时可以获取当前所有日历或事件的数据。</p>
<pre class='prettyprint'><code>/* 获取日历数据 */
var calendar  = $(&#39;#calendar&#39;).data(&#39;zui.calendar&#39;);
var calendars = calendar.calendars; // 获取所有日历对象实例
var events    = calendar.events;    // 获取所有事件对象实例
</code></pre>
      <p>当前获取了日历事件数据后可以手动直接更改所有属性，不过需要调用<code>display()</code>方法才能够将更改应用到界面中。</p>

      <h4>事件</h4>
      <p>日历中的事件既可以使用jQuery原生方法来绑定，也可以写在启动参数中。</p>
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>事件名称</th>
            <th>jQuery事件名称</th>
            <th>说明</th>
            <th>特别的事件参数</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><code>clickTodayBtn</code></td>
            <td><code>"clickTodayBtn.zui.calendar"</code></td>
            <td>点击日历头部的当天按钮时发生</td>
            <td>无</td>
          </tr>
          <tr>
            <td><code>clickNextBtn</code></td>
            <td><code>"clickNextBtn.zui.calendar"</code></td>
            <td>点击当前视图下一个日期范围按钮时发生</td>
            <td>无</td>
          </tr>
          <tr>
            <td><code>clickPrevBtn</code></td>
            <td><code>"clickPrevBtn.zui.calendar"</code></td>
            <td>点击当前视图上一个日期范围按钮时发生</td>
            <td>无</td>
          </tr>
          <tr>
            <td><code>clickEvent</code></td>
            <td><code>"clickEvent.zui.calendar"</code></td>
            <td>当点击一个事件时发生</td>
            <td>
              <ul>
                <li><code>event.event</code> 事件对象实例，当前点击的事件对象实例</li>
                <li><code>event.events</code> 事件对象实例数组，当前所有事件</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>beforeAddCalendars</code></td>
            <td><code>"beforeAddCalendars.zui.calendar"</code></td>
            <td>在向日历添加一个新的日历之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消添加</td>
            <td>
              <ul>
                <li><code>event.newCalendar</code> 新的日历对象实例</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>addCalendars</code></td>
            <td><code>"addCalendars.zui.calendar"</code></td>
            <td>在向日历添加一个新的日历之后发生</td>
            <td>
              <ul>
                <li><code>event.newCalendars</code> 所有新的日历对象实例</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>beforeAddEvent</code></td>
            <td><code>"beforeAddEvent.zui.calendar"</code></td>
            <td>在向日历添加一个新的事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消添加</td>
            <td>
              <ul>
                <li><code>event.newEvent</code> 新的事件对象实例</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>addEvents</code></td>
            <td><code>"addEvents.zui.calendar"</code></td>
            <td>在向日历添加一个或多个新的事件之后发生</td>
            <td>
              <ul>
                <li><code>event.newEvents</code> 所有新的事件对象实例</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>beforeRemoveEvent</code></td>
            <td><code>"beforeRemoveEvent.zui.calendar"</code></td>
            <td>在向日历移除一个事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消移除</td>
            <td>
              <ul>
                <li><code>event.event</code> 需要移除的事件对象实例</li>
                <li><code>event.eventId</code> 需要移除的事件id</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>removeEvents</code></td>
            <td><code>"removeEvents.zui.calendar"</code></td>
            <td>在向日历移除一个或多个事件之后发生</td>
            <td>
              <ul>
                <li><code>event.removedEvents</code> 所有需要移除的事件对象实例</li>
                <li><code>event.data</code> 所有日历事件数据</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>beforeChange</code></td>
            <td><code>"beforeChange.zui.calendar"</code></td>
            <td>更改一个事件之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消本次更改</td>
            <td>
              <ul>
                <li><code>event.event</code> 要更改的事件对象实例</li>
                <li><code>event.change</code> 要更改的属性名称</li>
                <li><code>event.from</code> 更改之前该属性的值</li>
                <li><code>event.to</code> 更改之后新的值</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>change</code></td>
            <td><code>"change.zui.calendar"</code></td>
            <td>当一个或多个事件发生更改时发生</td>
            <td>
              <ul>
                <li><code>event.data</code> 所有日历事件数据</li>
                <li><code>event.changes</code> 数组，所有更改明细，每一项包含下列属性：
                  <ul>
                    <li><code>event.event</code> 要更改的事件对象实例</li>
                    <li><code>event.change</code> 要更改的属性名称</li>
                    <li><code>event.from</code> 更改之前该属性的值</li>
                    <li><code>event.to</code> 更改之后新的值</li>
                  </ul>
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>beforeDisplay</code></td>
            <td><code>"beforeDisplay.zui.calendar"</code></td>
            <td>在重新显示视图之前发生，如果在该事件处理函数中返回<code>false</code>，则会取消显示</td>
            <td>
              <ul>
                <li><code>event.view</code> 字符串，要显示的视图名称</li>
                <li><code>event.date</code> 日期事件对象实例，要显示的日期</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>display</code></td>
            <td><code>"display.zui.calendar"</code></td>
            <td>在重新显示视图之后发生</td>
            <td>
              <ul>
                <li><code>event.view</code> 字符串，要显示的视图名称</li>
                <li><code>event.date</code> 日期事件对象实例，要显示的日期</li>
              </ul>
            </td>
          </tr>
          <tr>
            <td><code>clickCell</code></td>
            <td><code>"clickCell.zui.calendar"</code></td>
            <td>当点击一个日期单元格时发生</td>
            <td>
              <ul>
                <li><code>event.view</code> 字符串，当前视图名称</li>
                <li><code>event.date</code> 日期事件对象实例，当前单元格的日期</li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>

      <h5>使用启动参数处理事件</h5>
<pre class='prettyprint'><code>$(&#39;calendar&#39;).calendar(
{
    clickEvent: function(event)
    {
        console.log(event);
        // console.log("你点击了一个事件");
        // 处理 clickEvent 事件
        // ...
    }
});</code></pre>
      <h5>使用jQuery方法绑定事件处理函数</h5>
<pre class='prettyprint'><code>$(&#39;calendar&#39;).calendar().on("clickEvent.zui.calendar", function(event)
{
    console.log(event);
    // console.log("你点击了一个事件");
    // 处理 clickEvent 事件
    // ...
});</code></pre>
    </section>

    <section id="forms">
      <div class="page-header">
        <h2>表单 </h2>
      </div>

      <h3>类型</h3>
      <h4>基本类型</h4>
      <div class='example'>
        <form class="form-horizontal" role="form" method='post'>
          <legend>创建文章</legend>
          <div class="form-group">
            <label class="col-md-2 control-label required">类目</label>
            <div class="col-md-4">
              <select name='categories[]' id='categories' multiple='multiple' class='select-3 form-control chosen'>
                <option value='2'>/蝉知动态</option>
                <option value='51'>/asd</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">作者</label>
            <div class="col-md-4">
               <input type='text' name='author' id='author' value='demo' class='form-control' />
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">创建日期</label>
            <div class="col-md-4">
              <div class="input-group">
                <input type='text' name='date' id='date' value='2013-2-13' class='form-control' />
                <span class="input-group-btn"> <button class="btn btn-default" type="button">田</button> </span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">来源</label>
            <div class='col-md-4'>
              <select name='original' id='original' class='form-control'>
                <option value='1' selected='selected'>原创</option>
                <option value='0'>转贴</option>
              </select>
            </div>
            <div id='copyBox'>
              <div class='col-md-2'><input type='text' name='copySite' id='copySite' value='' class='form-control' placeholder='来源网站' /></div>
              <div class='col-md-4'><input type='text' name='copyURL' id='copyURL' value='' class='form-control' placeholder='来源URL' /></div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">标题</label>
            <div class="col-md-10 has-error">
               <input type='text' name='title' id='title' value='' class='form-control' placeholder=''/>
               <div class="help-block alert alert-warning">标题不能为空</div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">英文别名</label>
            <div class="col-md-10">
              <div class="input-group">
                <span class="input-group-addon">http://demo.chanzhi.org/article/id@</span>
                <input type='text' name='alias' id='alias' value='' class='form-control' />
                <span class="input-group-addon">.html</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">关键字</label>
            <div class="col-md-10">
              <input type='text' name='keywords' id='keywords' value='' class='form-control' />
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">摘要</label>
            <div class="col-md-10">
              <textarea name='summary' id='summary' rows='2' class='form-control'></textarea>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">内容</label>
            <div class="col-md-10">
              <textarea name='content' id='content' rows='10' class='form-control'></textarea>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">保存为</label>
            <div class="col-md-10">
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option1" checked> 草稿 </label>
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option2"> 私人 </label>
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option2"> 公开 </label>
            </div>
          </div>

          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
               <input type='submit' id='submit' class='btn btn-primary' value='保存' data-loading='稍候...' /> <input type='hidden' name='type' id='type' value='article'  />
            </div>
          </div>
        </form>
      </div>

      <h4>更为紧凑的表单</h4>
      <div class="example">
        <form class="form-horizontal form-condensed" role="form" method='post'>
          <legend>创建文章</legend>
          <div class="form-group">
            <label class="col-md-2 control-label required">类目</label>
            <div class="col-md-4">
              <select name='categories[]' id='categories' multiple='multiple' class='select-3 form-control chosen'>
                <option value='2'>/蝉知动态</option>
                <option value='51'>/asd</option>
              </select>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">作者</label>
            <div class="col-md-4">
               <input type='text' name='author' id='author' value='demo' class='form-control' />
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">创建日期</label>
            <div class="col-md-4">
              <div class="input-group">
                <input type='text' name='date' id='date' value='2013-2-13' class='form-control' />
                <span class="input-group-btn"> <button class="btn btn-default" type="button">田</button> </span>
              </div>
            </div>
          </div>


          <div class="form-group">
            <label class="col-md-2 control-label">来源</label>
            <div class='col-md-4'>
              <select name='original' id='original' class='form-control'>
                <option value='1' selected='selected'>原创</option>
                <option value='0'>转贴</option>
              </select>
            </div>
            <div id='copyBox'>
              <div class='col-md-2'><input type='text' name='copySite' id='copySite' value='' class='form-control' placeholder='来源网站' /></div>
              <div class='col-md-3'><input type='text' name='copyURL' id='copyURL' value='' class='form-control' placeholder='来源URL' /></div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">标题</label>
            <div class="col-md-10 has-error">
               <input type='text' name='title' id='title' value='' class='form-control' placeholder=''/>
               <div class="help-block alert alert-warning">标题不能为空</div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">英文别名</label>
            <div class="col-md-10">
              <div class="input-group">
                <span class="input-group-addon">http://demo.chanzhi.org/article/id@</span>
                <input type='text' name='alias' id='alias' value='' class='form-control' />
                <span class="input-group-addon">.html</span>
              </div>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">关键字</label>
            <div class="col-md-10">
              <input type='text' name='keywords' id='keywords' value='' class='form-control' />
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">摘要</label>
            <div class="col-md-10">
              <textarea name='summary' id='summary' rows='2' class='form-control'></textarea>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">内容</label>
            <div class="col-md-10">
              <textarea name='content' id='content' rows='10' class='form-control'></textarea>
            </div>
          </div>

          <div class="form-group">
            <label class="col-md-2 control-label">保存为</label>
            <div class="col-md-10">
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option1" checked> 草稿 </label>
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option2"> 私人 </label>
              <label class='radio-inline'> <input type="radio" name="optionsRadios" value="option2"> 公开 </label>
            </div>
          </div>

          <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
               <input type='submit' id='submit' class='btn btn-primary' value='保存' data-loading='稍候...' /> <input type='hidden' name='type' id='type' value='article'  />
            </div>
          </div>
        </form>
      </div>
    </section>

    <section id="article">
      <div class="page-header">
        <h2>文章 </h2>
      </div>
      <table class="table">
        <tr>
          <td>头部</td>
          <td>头部包含文章标题、文章信息和摘要</td>
        </tr>
        <tr>
          <td>正文</td>
          <td>正文的多个部分使用<code>section</code></td>
        </tr>
        <tr>
          <td>底部</td>
          <td>底部显示版权及文章的其他信息</td>
        </tr>
      </table>
      <p>普通文章视图</p>
      <div contenteditable="true" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <article class="article">
          <header>
            <h1 class="text-center">文章标题</h1>
            <dl class="dl-inline">
              <dt>发布时间：</dt>
              <dd>2013-11-07 17:14:22</dd>
              <dt>作者：</dt>
              <dd>Catouse</dd>
              <dt></dt>
              <dd class="pull-right"><span class="label label-success">NEW</span> <span class="label label-warning">火爆</span> <span class="label label-info">原创</span> <span class="label label-danger"><i class="icon-eye-open"></i> 235</span></dd>
            </dl>
            <section class="abstract">
              <p><strong>摘要：</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?</p>
            </section>
          </header>
          <section class="article-content">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur.</h3>
            <h4>Lorem ipsum dolor sit amet, consectetur.</h4>
            <h5>Lorem ipsum dolor sit amet, consectetur.</h5>
            <h6>Lorem ipsum dolor sit amet, consectetur.</h6>
            <p><a href="###4">Lorem ipsum dolor</a> sit amet, consectetur adipisicing elit. Autem, ad, libero hic voluptatem sapiente possimus recusandae laboriosam adipisci voluptates inventore perferendis nam aliquid odio nostrum voluptate quasi totam itaque. Veritatis, dolore, sint, reiciendis repellat est non enim tenetur unde odio eius recusandae ut quae vero incidunt dolorem excepturi consectetur itaque.</p>
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, officiis!</small>
            </blockquote>
            <h3>Lorem ipsum dolor sit amet, consectetur.</h3>
            <p>Voluptates, repellat, voluptatibus temporibus facere veritatis ab similique quas nobis provident ratione eum sequi officiis sunt atque reprehenderit ut ipsum vel tempora alias consectetur numquam consequatur dignissimos eligendi rerum voluptas cupiditate tempore neque quam itaque illo veniam aspernatur distinctio praesentium labore et quod autem officia est beatae fuga corrupti inventore.</p>
            <img src="img/img1.png" alt="">
            <p>Architecto, officiis, incidunt, excepturi, repudiandae iusto quam tempora blanditiis sed quae aliquam quaerat soluta distinctio nulla vero at. Reprehenderit, aperiam laboriosam dolores eius quam autem magnam est fugiat minima nihil. Aut, minus, nemo iure fuga corporis repellendus perspiciatis iusto veritatis iste similique. Totam ut repudiandae nemo cumque aperiam aut sint.</p>
            <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
            <ul>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta eveniet aspernatur facere quisquam veniam eos voluptates similique quis voluptas.</li>
              <li>Quaerat, aut atque praesentium quidem consequatur consequuntur repudiandae error maxime laboriosam nesciunt vitae illo laborum voluptas enim aliquid eius ad!</li>
              <li>Qui, soluta, ipsum, alias reiciendis iusto natus ullam distinctio nam exercitationem culpa veniam mollitia id sapiente quisquam nihil totam in.</li>
            </ul>
            <hr>
            <p>Magnam, modi, repellat beatae perferendis illo dicta illum dolore minus aperiam sit perspiciatis voluptas molestias eaque numquam ipsum deserunt at aut quam quisquam tenetur. Repellat, ratione nihil voluptate sit pariatur quasi ipsum? Sapiente, fugit nesciunt placeat ut expedita id inventore nobis iure adipisci ullam aliquid laboriosam facere officiis molestiae mollitia!</p>
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>Lorem ipsum.</th>
                  <th>Quis, ut.</th>
                  <th>Officia, odio?</th>
                  <th>Eos, modi!</th>
                  <th>Autem, doloremque!</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Dolor, rem.</td>
                  <td>Iure, quaerat.</td>
                  <td>Quibusdam, nam.</td>
                  <td>Blanditiis, quo.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Aliquid, dicta.</td>
                  <td>Architecto, perspiciatis.</td>
                  <td>Eos, corporis.</td>
                  <td>Similique, cum.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Id, minus!</td>
                  <td>Eos, sit.</td>
                  <td>Quae, dolores?</td>
                  <td>Consectetur, deleniti!</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Nam, excepturi.</td>
                  <td>Assumenda, cumque!</td>
                  <td>Vero, eligendi.</td>
                  <td>Odit, porro.</td>
                </tr>
              </tbody>
            </table>
            <p>Adipisci reprehenderit placeat quos provident alias cupiditate ratione perspiciatis! Fuga, fugit id nisi sapiente voluptatibus quidem. Tempora, optio, animi, iste fugiat quisquam veniam aliquam sed labore at ad numquam eum nobis natus quasi magni. Sequi, dolor, sed, at, debitis accusamus ad qui voluptas est odit ipsa consequatur sint odio porro.</p>
            <ol>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, rerum, molestias possimus minima magnam libero iste amet ad. Ratione, deserunt, adipisci! Ducimus, nihil totam ad beatae corporis. Voluptatem, facere minima!</li>
              <li>Cupiditate, omnis, sit, ducimus, natus quo quam quia excepturi numquam deleniti totam odit illum voluptate id! Commodi, itaque magni saepe porro rem ducimus animi error ullam. Animi, consequatur totam natus.</li>
              <li>Quae, magni, dolorum odio quia labore asperiores sit dolorem vel hic laboriosam doloribus minima necessitatibus veritatis earum aliquid non rem ad id itaque pariatur repudiandae dolore eligendi illo nobis fuga.</li>
            </ol>
            <dl>
              <dt>Lorem.</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
              <dt>Ut.</dt>
              <dd>Necessitatibus, fugit repellat fugiat a.</dd>
              <dt>Aliquam.</dt>
              <dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
              <dt>Minima!</dt>
              <dd>Esse soluta iure corporis porro.</dd>
              <dt>Sunt.</dt>
              <dd>Delectus quos amet quidem eaque!</dd>
            </dl>
            <p>Nemo, dolorum nisi sequi recusandae deserunt soluta nobis itaque expedita atque excepturi quidem sapiente qui perferendis maiores quas consectetur nulla quae libero impedit ea corporis eos dicta blanditiis ad quis quos quaerat reiciendis aliquam minima rem nesciunt odit est mollitia ipsa vero ratione ipsum. Dolorum, reprehenderit sint vero distinctio aliquam.</p>
          </section>
          <footer>
            <p class="pull-right text-muted">
              发布时间：2013年11月7日 16:44:21 &nbsp;点击数：234
            </p>
            <p class="text-important">本文版权所有归<a href="###">@catouse</a></p>
            <ul class="pager pager-justify">
              <li class="previous"><a href="#"><i class="icon-arrow-left"></i> 论烧火煮饭</a></li>
              <li><a href="#"><i class="icon-list-ul"></i> 目录</a></li>
              <li class="next disabled"><a href="#">没有下一篇 <i class="icon-arrow-right"></i></a></li>
            </ul>
          </footer>
        </article>
      </div>
      <p>一个更紧凑的文章视图</p>
      <div contenteditable="true" spellcheck="false" class="example no-padding">
        <br>
        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data <i class="icon-map-marker"></i></li>
        </ul>
        <article class="article article-condensed" contenteditable="true">
          <header>
            <dl class="dl-inline pull-right">
              <dt>发布时间：</dt>
              <dd>2013-11-07 17:14:22</dd>
              <dt>作者：</dt>
              <dd>Catouse</dd>
              <dt></dt>
              <dd><span class="label label-success">最新</span> <span class="label label-warning">火爆</span> <span class="label label-info">原创</span></dd>
            </dl>
            <h1>文章标题</h1>
            <dl class="dl-inline">
              <dt>发布时间：</dt>
              <dd>2013-11-07 17:14:22</dd>
              <dt>作者：</dt>
              <dd>Catouse</dd>
              <dt></dt>
              <dd><span class="label label-info">原创</span></dd>
            </dl>
            <section class="abstract">
              <p><strong>摘要：</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, necessitatibus provident quasi suscipit laborum nemo tenetur ad accusantium explicabo pariatur?</p>
            </section>
          </header>
          <section class="article-content">
            <h1>Lorem ipsum dolor sit amet.</h1>
            <h2>Lorem ipsum dolor sit amet, consectetur.</h2>
            <h3>Lorem ipsum dolor sit amet, consectetur.</h3>
            <h4>Lorem ipsum dolor sit amet, consectetur.</h4>
            <h5>Lorem ipsum dolor sit amet, consectetur.</h5>
            <h6>Lorem ipsum dolor sit amet, consectetur.</h6>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, ad, libero hic voluptatem sapiente possimus recusandae laboriosam adipisci voluptates inventore perferendis nam aliquid odio nostrum voluptate quasi totam itaque. Veritatis, dolore, sint, reiciendis repellat est non enim tenetur unde odio eius recusandae ut quae vero incidunt dolorem excepturi consectetur itaque.</p>
            <blockquote>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
              <small>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, officiis!</small>
            </blockquote>
            <p>Voluptates, repellat, voluptatibus temporibus facere veritatis ab similique quas nobis provident ratione eum sequi officiis sunt atque reprehenderit ut ipsum vel tempora alias consectetur numquam consequatur dignissimos eligendi rerum voluptas cupiditate tempore neque quam itaque illo veniam aspernatur distinctio praesentium labore et quod autem officia est beatae fuga corrupti inventore.</p>
            <img src="img/img1.png" alt="" style="width:100%">
            <p>Architecto, officiis, incidunt, excepturi, repudiandae iusto quam tempora blanditiis sed quae aliquam quaerat soluta distinctio nulla vero at. Reprehenderit, aperiam laboriosam dolores eius quam autem magnam est fugiat minima nihil. Aut, minus, nemo iure fuga corporis repellendus perspiciatis iusto veritatis iste similique. Totam ut repudiandae nemo cumque aperiam aut sint.</p>
            <ul>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis soluta eveniet aspernatur facere quisquam veniam eos voluptates similique quis voluptas.</li>
              <li>Quaerat, aut atque praesentium quidem consequatur consequuntur repudiandae error maxime laboriosam nesciunt vitae illo laborum voluptas enim aliquid eius ad!</li>
              <li>Qui, soluta, ipsum, alias reiciendis iusto natus ullam distinctio nam exercitationem culpa veniam mollitia id sapiente quisquam nihil totam in.</li>
            </ul>
            <p>Magnam, modi, repellat beatae perferendis illo dicta illum dolore minus aperiam sit perspiciatis voluptas molestias eaque numquam ipsum deserunt at aut quam quisquam tenetur. Repellat, ratione nihil voluptate sit pariatur quasi ipsum? Sapiente, fugit nesciunt placeat ut expedita id inventore nobis iure adipisci ullam aliquid laboriosam facere officiis molestiae mollitia!</p>
            <table>
              <thead>
                <tr>
                  <th>Lorem ipsum.</th>
                  <th>Quis, ut.</th>
                  <th>Officia, odio?</th>
                  <th>Eos, modi!</th>
                  <th>Autem, doloremque!</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Dolor, rem.</td>
                  <td>Iure, quaerat.</td>
                  <td>Quibusdam, nam.</td>
                  <td>Blanditiis, quo.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Aliquid, dicta.</td>
                  <td>Architecto, perspiciatis.</td>
                  <td>Eos, corporis.</td>
                  <td>Similique, cum.</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Id, minus!</td>
                  <td>Eos, sit.</td>
                  <td>Quae, dolores?</td>
                  <td>Consectetur, deleniti!</td>
                </tr>
                <tr>
                  <td>Lorem ipsum.</td>
                  <td>Nam, excepturi.</td>
                  <td>Assumenda, cumque!</td>
                  <td>Vero, eligendi.</td>
                  <td>Odit, porro.</td>
                </tr>
              </tbody>
            </table>
            <p>Adipisci reprehenderit placeat quos provident alias cupiditate ratione perspiciatis! Fuga, fugit id nisi sapiente voluptatibus quidem. Tempora, optio, animi, iste fugiat quisquam veniam aliquam sed labore at ad numquam eum nobis natus quasi magni. Sequi, dolor, sed, at, debitis accusamus ad qui voluptas est odit ipsa consequatur sint odio porro.</p>
            <ol>
              <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, rerum, molestias possimus minima magnam libero iste amet ad. Ratione, deserunt, adipisci! Ducimus, nihil totam ad beatae corporis. Voluptatem, facere minima!</li>
              <li>Cupiditate, omnis, sit, ducimus, natus quo quam quia excepturi numquam deleniti totam odit illum voluptate id! Commodi, itaque magni saepe porro rem ducimus animi error ullam. Animi, consequatur totam natus.</li>
              <li>Quae, magni, dolorum odio quia labore asperiores sit dolorem vel hic laboriosam doloribus minima necessitatibus veritatis earum aliquid non rem ad id itaque pariatur repudiandae dolore eligendi illo nobis fuga.</li>
            </ol>
            <dl>
              <dt>Lorem.</dt>
              <dd>Lorem ipsum dolor sit amet.</dd>
              <dt>Ut.</dt>
              <dd>Necessitatibus, fugit repellat fugiat a.</dd>
              <dt>Aliquam.</dt>
              <dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
              <dt>Minima!</dt>
              <dd>Esse soluta iure corporis porro.</dd>
              <dt>Sunt.</dt>
              <dd>Delectus quos amet quidem eaque!</dd>
            </dl>
            <p>Nemo, dolorum nisi sequi recusandae deserunt soluta nobis itaque expedita atque excepturi quidem sapiente qui perferendis maiores quas consectetur nulla quae libero impedit ea corporis eos dicta blanditiis ad quis quos quaerat reiciendis aliquam minima rem nesciunt odit est mollitia ipsa vero ratione ipsum. Dolorum, reprehenderit sint vero distinctio aliquam.</p>
          </section>
          <footer>
            <p class="pull-right text-muted">
              发布时间：2013年11月7日 16:44:21 &nbsp;点击数：234
            </p>
            <p class="text-important">本文版权所有归<a href="###">@catouse</a></p>
            <ul class="pager pager-justify">
              <li class="previous"><a href="#">« 上一篇：论烧火煮饭</a></li>
              <li class="next"><a href="#">下一篇：合适不合适？ »</a></li>
            </ul>
          </footer>
        </article>
      </div>
    </section>

    <section id="card">
      <div class="page-header">
        <h2>卡片 </h2>
      </div>

      <table class="table">
        <tr>
          <td>头部</td>
          <td>包含当前列表标题</td>
        </tr>
        <tr>
          <td>列表</td>
          <td>多个列表部分请使用<code>section</code></td>
        </tr>
        <tr>
          <td>底部</td>
          <td>底部显示页码及其他提示信息</td>
        </tr>
      </table>
      <p>图片链接</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明</span>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>图片链接＋标题</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <strong class="card-heading">图片标题飞</strong>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <strong class="card-heading">Lorem ipsum dolor sit.</strong>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
              </a>
            </div>
          </section>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <h5 class="card-heading">Lorem ipsum dolor sit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
              </a>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>图片＋标题</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i> 123</a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-star-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
          </section>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn"><i class="icon-search"></i> 查看</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-primary"><i class="icon-shopping-cart"></i> 订购</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-danger"><i class="icon-smile"></i> 喜欢</button>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>包装器内的图片＋标题</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <a href="#" class="media-wrapper"><img src="img/img1.png" alt=""></a>
                <span class="caption">关于图片的说明</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i> 123</a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-star-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>无边框卡片</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards cards-borderless">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img1.png" alt=""></div>
                <span class="caption">关于图片的说明</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i> 123</a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-star-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <div class="media-wrapper"><img src="img/img2.jpg" alt=""></div>
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
          </section>
          <section class="cards cards-borderless">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn"><i class="icon-search"></i> 查看</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-primary"><i class="icon-shopping-cart"></i> 订购</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-danger"><i class="icon-smile"></i> 喜欢</button>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>更为紧凑的模式</p>
      <p><code>.cards-condensed</code></p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Cards &nbsp;<small>26 items</small></h3>
          </header>
          <section class="cards cards-condensed">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的超多多多多多多多多多多多多多多多多多多多多多多多多多说明</span>
              </a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <a href="###" class="card"><img src="img/img2.jpg" alt=""></a>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-reveal">
                  <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                  <div class="card-actions">
                      <a href="###"><i class="icon-comment"></i> 343</a>
                      <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                  </div>
                  <div class="card-content text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                  </div>
                  <div class="card-actions">
                    <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-reveal">
                  <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                  <div class="card-actions">
                      <a href="###"><i class="icon-comment"></i> 343</a>
                      <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                  </div>
                  <div class="card-content text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                  </div>
                  <div class="card-actions">
                    <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-reveal">
                  <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                  <div class="card-actions">
                      <a href="###"><i class="icon-comment"></i> 343</a>
                      <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                  </div>
                  <div class="card-content text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                  </div>
                  <div class="card-actions">
                    <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-heart-empty"></i> 123</a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-reveal">
                  <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                  <div class="card-actions">
                      <a href="###"><i class="icon-comment"></i> 343</a>
                      <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                  </div>
                  <div class="card-content text-muted">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                  </div>
                  <div class="card-actions">
                    <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <div class="card-heading">
                  <span class="pull-right"><a href="###"><i class="icon-star-empty"></i></a></span>
                  <a href="###"><strong>Lorem ipsum dolor sit.</strong></a>
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div>
          </section>
          <section class="cards cards-condensed">
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">关于图片的说明</span>
                <h5 class="card-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, autem dolorum accusantium laboriosam architecto veritatis eaque pariatur quisquam ea odit.</h5>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <a href="###"><i class="icon-comment"></i> 343</a>
                  <span class="text-muted">&nbsp;&nbsp;2013-11-12 15:05:56</span>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <span class="label">tag1</span>
                  <a href="###" class="pull-right"><i class="icon-comment"></i> 343</a>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn"><i class="icon-search"></i> 查看</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-primary"><i class="icon-shopping-cart"></i> 订购</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-success"><i class="icon-comments-alt"></i> 参与讨论</button>
                </div>
              </div>
            </div><div class="col-md-4 col-sm-6 col-lg-3">
              <div class="card">
                <img src="img/img2.jpg" alt="">
                <span class="caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, voluptatem.</span>
                <a href="###" class="card-heading"><strong>Lorem ipsum dolor sit.</strong></a>
                <div class="card-content text-muted">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, officia similique enim culpa ipsam voluptas. Quibusdam, tempora autem voluptatem aliquid!
                </div>
                <div class="card-actions">
                  <button class="btn btn-danger"><i class="icon-smile"></i> 喜欢</button>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
    </section>

    <section id="list">
      <div class="page-header">
        <h2>列表 </h2>
      </div>

      <table class="table">
        <tr>
          <td>头部</td>
          <td>包含当前列表标题</td>
        </tr>
        <tr>
          <td>列表</td>
          <td>多个列表部分请使用<code>section</code></td>
        </tr>
        <tr>
          <td>底部</td>
          <td>底部显示页码及其他提示信息</td>
        </tr>
      </table>
      <p>一般内容列表视图</p>
      <div contenteditable="false" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>一个更紧凑的视图</p>
      <div contenteditable="true" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list list-condensed">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
              </div>
              <div class="item-footer">
                <a href="#"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
      <p>带项目缩略图</p>
      <div contenteditable="ture" spellcheck="false" class="example">
        <br>
        <ul class="breadcrumb breadcrumb-block">
          <li><i class="icon-location-arrow icon-muted"></i></li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Library</a></li>
          <li class="active">Data</li>
        </ul>
        <div class="list">
          <header>
            <div class="pull-right">
              <div class="btn-group" data-toggle="buttons-radio">
                <button type="button" class="btn btn-default active"><i class="icon-th-list"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th"></i></button>
                <button type="button" class="btn btn-default"><i class="icon-th-large"></i></button>
              </div>
            </div>
            <h3><i class="icon-list-ul icon-border-circle"></i> Contents List &nbsp;<small>26 articles</small></h3>
          </header>
          <section class="items items-hover">
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-left">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-left">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-right">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media pull-right">
                  <div class="media-place-holder" style="width:200px;height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media">
                  <div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
            <div class="item">
              <div class="item-heading">
                <div class="pull-right"><a href="###"><i class="icon-pencil"></i> edit</a> &nbsp;<a href="#"><i class="icon-remove"></i> delete</a></div>
                <h4><span class="label label-success">NEW</span>&nbsp; <a href="###">Lorem ipsum dolor sit amet.中文标题测试</a></h4>
              </div>
              <div class="item-content">
                <div class="media">
                  <div class="media-place-holder" style="height:100px;line-height:100px">200x100</div>
                </div>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, necessitatibus, animi magni illo vel ducimus quia dolorum modi temporibus iste fugit laudantium minima minus sit debitis. Autem voluptate dolorum saepe!
                </div>
              </div>
              <div class="item-footer">
                <span class="label">tag1</span>
                &nbsp;
                <a href="#" class="text-muted"><i class="icon-comments"></i> 243</a>&nbsp;
                <span class="text-muted">2013-11-11 16:14:37</span>
              </div>
            </div>
          </section>
          <footer>
            <ul class="pager">
              <li class="previous"><a href="#">« 上一页</a></li>
              <li><a href="#">1</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">6</a></li>
              <li class="active"><a href="#">7</a></li>
              <li><a href="#">8</a></li>
              <li><a href="#">9</a></li>
              <li><a href="#">⋯</a></li>
              <li><a href="#">12</a></li>
              <li class="next"><a href="#">下一页 »</a></li>
            </ul>
          </footer>
        </div>
      </div>
    </section>

    <section id="comment">
      <div class="page-header">
        <h2>评论 </h2>
      </div>

      <h3>一般情况</h3>
      <div contenteditable="true" spellcheck="false" class="example">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
            <div class="alert alert-info text-center">
              <a href="alert-link">3 条新的评论</a>
            </div>
          </header>
          <section class="comments-list">
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted" title="2013-11-08 15:52:32">2 hours ago</span> &nbsp;<strong>#5</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>

                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
                </div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 hours ago</span> &nbsp;<strong>#4</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, illo eaque a iure in quidem officiis numquam ducimus odio non. Architecto, repellendus optio maxime quae sed molestiae ipsa animi tenetur!
                </div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </section>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
      <h3>回复缩进</h3>
      <div contenteditable="true" spellcheck="false" class="example">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
          </header>
          <div class="comments-list">
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                  <div class="comments-list">
                    <div class="comment">
                      <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                      <div class="comments-list">
                        <div class="comment">
                          <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                        <div class="comment">
                          <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">
                      <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
                <div class="comment">
                  <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </div>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <a href="###" class="avatar"><i class="icon-user icon-border icon-2x icon-muted"></i></a>
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
      <h3>没有用户头像</h3>
      <p>直接删掉头像部分即可完美适应</p>
      <div contenteditable="true" spellcheck="false" class="example">
        <div class="comments">
          <header>
            <div class="pull-right"><a href="#commentReplyForm" class="btn btn-info"><i class="icon-comment-alt"></i> 发表评论</a></div>
            <h3><i class="icon-comments icon-border-circle"></i> 26 comments</h3>
          </header>
          <div class="comments-list">
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                <span class="author">
                  <a href="#"><strong>Catouse</strong></a>
                  <span class="text-muted"> replied to </span>
                  <a href="#">Zhang Li</a>
                </span>
                <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                  <div class="comments-list">
                    <div class="comment">

                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                      <div class="comments-list">
                        <div class="comment">

                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                        <div class="comment">

                          <div class="content">
                            <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                            <span class="author">
                              <a href="#"><strong>Catouse</strong></a>
                              <span class="text-muted"> replied to </span>
                              <a href="#">Zhang Li</a>
                            </span>
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                            <div class="actions">
                              <a href="##">reply</a>
                              <a href="##">edit</a>
                              <a href="##">delete</a>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="comment">

                      <div class="content">
                        <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                        <span class="author">
                          <a href="#"><strong>Catouse</strong></a>
                          <span class="text-muted"> replied to </span>
                          <a href="#">Zhang Li</a>
                        </span>
                        <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                        <div class="actions">
                          <a href="##">reply</a>
                          <a href="##">edit</a>
                          <a href="##">delete</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">1 days ago</span> &nbsp;<strong>#2</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Excepturi voluptates ea esse voluptas ad voluptate voluptatibus laboriosam velit. Totam, fuga, laboriosam, optio, qui id voluptates nam fugit quibusdam labore alias atque laudantium repudiandae veniam delectus architecto libero ducimus consequatur hic sunt ipsa. Labore, eligendi sapiente dolores quibusdam ipsum.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
              <div class="comments-list">
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
                <div class="comment">

                  <div class="content">
                    <div class="pull-right"><span class="text-muted">4 hours ago</span> &nbsp;<strong>#3</strong></div>
                    <span class="author">
                      <a href="#"><strong>Catouse</strong></a>
                      <span class="text-muted"> replied to </span>
                      <a href="#">Zhang Li</a>
                    </span>
                    <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, iusto at voluptatem quis aspernatur voluptas harum odit corporis consequatur dicta? Eos, unde, doloremque ab voluptatibus mollitia quam quas itaque quod repellendus sed optio cum blanditiis architecto excepturi quidem sint eaque.</div>
                    <div class="actions">
                      <a href="##">reply</a>
                      <a href="##">edit</a>
                      <a href="##">delete</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="comment">
              <div class="content">
                <div class="pull-right"><span class="text-muted">2 months ago</span> &nbsp;<strong>#1</strong></div>
                <a href="#" class="author"><strong>Catouse</strong></a>
                <div class="text">Assumenda, accusamus, inventore, ut, ea laboriosam quae sunt maxime labore quisquam quod nesciunt saepe quis. Debitis, fuga, ad, aut eaque vero vitae suscipit obcaecati nemo eligendi numquam id labore voluptas veniam sequi perspiciatis facilis voluptates dolorem minus quibusdam unde molestias.</div>
                <div class="actions">
                  <a href="##">reply</a>
                  <a href="##">edit</a>
                  <a href="##">delete</a>
                </div>
              </div>
            </div>
          </div>
          <footer>
            <div class="reply-form" id="commentReplyForm">
              <div class="form">
                <form role="form">
                  <div class="form-group">
                    <textarea class="form-control new-comment-text" rows="2" placeholder="write a comment..."></textarea>
                  </div>
                  <div class="form-group comment-user" style="display:none">
                    <div class="row">
                      <div class="col-md-3">
                        <span class="pull-right">或者</span>
                        <a href="#">登录</a> &nbsp;<a href="##">注册</a>
                      </div>
                      <div class="col-md-7">
                        <div class="form-group">
                          <input type="text" class="form-control" id="nameInputEmail1" placeholder="Enter your name">
                        </div>
                        <div class="form-group">
                          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                        </div>
                      </div>
                      <div class="col-md-2"><button type="submit" class="btn btn-block btn-primary"><i class="icon-ok"></i></button></div>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </section>

    <section id="board">
      <div class="page-header">
        <h2>看板</h2>
      </div>

      <div class="example">
        <div class="boards">
          <div class="board panel">
            <div class="panel-heading">
              <strong>进行中</strong>
            </div>
            <div class="panel-body">
              <div class="board-list">
                <div class="board-item">
                  设计界面
                </div>
                <div class="board-item">
                  撰写文档
                </div>
                <div class="board-item">
                  紧急的任务
                </div>
              </div>
            </div>
          </div>
          <div class="board panel">
            <div class="panel-heading">
              <strong>已完成</strong>
            </div>
            <div class="panel-body">
              <div class="board-list">
                <div class="board-item">
                  初步设计
                </div>
                <div class="board-item">
                  数据库设计
                </div>
                <div class="board-item">
                  需求整理
                </div>
              </div>
            </div>
          </div>
          <div class="board panel">
            <div class="panel-heading">
              <strong>未完成</strong>
            </div>
            <div class="panel-body">
              <div class="board-list">
                <div class="board-item">
                  测试
                </div>
                <div class="board-item">
                  发布
                </div>
                <div class="board-item">
                  庆祝
                </div>
                <div class="disable-drop board-item">
                  不可拖拽
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section id="dashboard">
      <div class="page-header">
        <h2>仪表盘</h2>
      </div>
      <div class="example" style='max-width: 1600px; width: inherit; padding: 50px 50px; background: #114DAD'>
        <div id="dashboard" class="dashboard dashboard-draggable" data-height="300">
          <header></header>
          <section class='row'>
            <div class="col-md-4 col-sm-6" data-id='1'>
              <div class="panel" data-url='http://baidu.com'>
                <div class="panel-heading">
                  <div class="panel-actions">
                    <button class="btn btn-mini refresh-panel"><i class="icon-refresh"></i></button>
                      <div class="dropdown">
                        <button role="button" class="btn btn-mini" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                          <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                          <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                        </ul>
                      </div>
                    </div>1 <i class="icon-list-ul"></i> Html Panel : dl
                  </div>
                <div class="panel-body">
                  <dl>
                    <dt>Lorem.</dt>
                    <dd>Lorem ipsum dolor sit amet.</dd>
                    <dt>Ut.</dt>
                    <dd>Necessitatibus, fugit repellat fugiat a.</dd>
                    <dt>Aliquam.</dt>
                    <dd>Obcaecati cum suscipit consequuntur voluptas?</dd>
                    <dt>Minima!</dt>
                    <dd>Esse soluta iure corporis porro.</dd>
                    <dt>Sunt.</dt>
                    <dd>Delectus quos amet quidem eaque!</dd>
                  </dl>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='2'>
              <div class="panel" data-url='http://chanzhi.org'>
                <div class="panel-heading">
                  <div class="panel-actions">
                    <a href="#"><i class="icon-refresh"></i></a>
                      <div class="dropdown">
                        <a href='#' role="button" data-toggle="dropdown"><span class="caret"></span></a>
                        <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
                          <li><a href="#"><i class="icon-pencil"></i> 编辑</a></li>
                          <li><a href="#" class='refresh-panel'><i class="icon-refresh"></i> 刷新</a></li>
                          <li><a href="#" class="remove-panel"><i class="icon-remove"></i> 移除</a></li>
                        </ul>
                      </div>
                    </div>2 <i class="icon-list-ul"></i> Html Panel : ul
                  </div>
                <div class="panel-body">
                  <ul>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Corrupti, hic illo a doloribus!</li>
                    <li>Magnam consequatur veniam ullam temporibus.</li>
                    <li>Dolores, nobis ratione dolorem voluptate.</li>
                    <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                    <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                    <li>Facere commodi dolor quasi. Nihil.</li>
                    <li>Esse, similique nulla doloremque dolorum.</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='3'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button><button class="btn btn-mini btn-danger remove-panel"><i class="icon-remove"></i></button></div>3 Html Panel : ol</div>
                <div class="panel-body">
                  <ol>
                    <li>Lorem ipsum dolor sit amet.</li>
                    <li>Corrupti, hic illo a doloribus!</li>
                    <li>Magnam consequatur veniam ullam temporibus.</li>
                    <li>Dolores, nobis ratione dolorem voluptate.</li>
                    <li>Nulla, ratione dignissimos nesciunt sequi.</li>
                    <li>Praesentium, dicta accusamus laborum laboriosam!</li>
                    <li>Facere commodi dolor quasi. Nihil.</li>
                    <li>Esse, similique nulla doloremque dolorum.</li>
                  </ol>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='4'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>4 Panel heading</div>
                <div class="panel-body"></div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='5'>
              <div class="panel">
                <div class="panel-heading">5 Table<div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div></div>
                <div class="panel-body">
                  <table class="table">
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Debitis, consectetur.</td>
                      <td>Ullam, asperiores.</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Saepe, mollitia.</td>
                      <td>Placeat, vel!</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Amet, architecto!</td>
                      <td>Natus, quis!</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Quam, nesciunt.</td>
                      <td>Perspiciatis, vel!</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Et, aut!</td>
                      <td>Molestias, necetatibus?</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Fugit, fuga?</td>
                      <td>Iure, officiis.</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Saepe, neque!</td>
                      <td>Deserunt, voluptates?</td>
                    </tr>
                    <tr>
                      <td>Lorem ipsum.</td>
                      <td>Praesentium, eum!</td>
                      <td>Numquam, molestias.</td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='6'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>6 Panel heading</div>
                <div class="panel-body"></div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='7'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>7 Panel heading</div>
                <div class="panel-body"></div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='8'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>8 Panel heading</div>
                <div class="panel-body"></div>
              </div>
            </div>
            <div class="col-md-4 col-sm-6" data-id='9'>
              <div class="panel">
                <div class="panel-heading"><div class="panel-actions"><button class="btn btn-mini"><i class="icon-refresh"></i></button></div>9 Panel heading</div>
                <div class="panel-body"></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </section>
  </div>

  <script src="../dist/lib/jquery/jquery.js"></script>
  <script src="js/zui.js"></script>
  <script src="../dist/lib/datetimepicker/datetimepicker.min.js"></script>
  <script src="../dist/lib/chosen/chosen.min.js"></script>
  <script src="../dist/lib/chosen/chosen.icons.min.js" type="text/javascript"></script>
  <script src="../assets/google-code-prettify/prettify.js"></script>
  <script src="js/doc.js"></script>

  <script>
  var now = new Date();
  var start = now.getSeconds(),
      calendars = ['success', 'danger', 'important', 'warning', 'info', 'specail', 'primary'],
      rooms = ['A003', 'A004', 'A010', 'A143', 'B008', 'B098', 'B487', 'B340', 'Z000', 'Z431', 'Z018', 'Z864'],
      peoples = ['奥特曼', '行者孙', '地卜师', '绿巨人', 'Catouse', '路人丙'],
      events = ['进食', '喝水', '交谈', '睡觉', '捶打墙壁', '自言自语', '搬动椅子', '唱歌', '上网', '梦游', '观望天花板'],
      eventsTypes = ['happy', 'sad', ':]'],
      tools = ['桌子', '椅子', '水杯', '枪', '随从'],
      descs = ['没有完成', '这次失败了', '徒劳', '很满意', '禁止再次发生', '也行', '情况不明', '发现未知征兆'];
  var calEventGenerater = function()
      {
          var start = now.clone().addDays(Math.random() * 400 - 200);
          var e =
          {
              title: (Math.random() > 0.5 ? ('和' + peoples[Math.floor(Math.random()*peoples.length)]) : '') + events[Math.floor(Math.random()*events.length)],
              desc: descs[Math.floor(Math.random()*descs.length)],
              calendar: calendars[Math.floor(Math.random()*calendars.length)],
              allDay: Math.random() > 0.9,
              start: start,
              end: start.clone().addDays(Math.random() * 1.5)
          };
          return e;
      };
  var dtDataGenerater = function(rowsCount)
      {
          var data =
          {
              cols:
              [
                  {width: 100, text: '#', type: 'number', flex: false, colClass: 'text-center'},
                  {sort: 'down', width: 160, text: '时间', type: 'date', flex: false, colClass: ''},
                  {width: 80, text: '房间', type: 'string', flex: false, colClass: ''},
                  {width: 100, text: '人物', type: 'string', flex: false, colClass: ''},
                  {width: 'auto', text: '事件', type: 'string', flex: false, colClass: ''},
                  {width: 100, text: '事件类型', type: 'string', flex: true, colClass: 'text-center'},
                  {sort: false, width: 200, text: '描述', type: 'string', flex: true, colClass: ''},
                  {width: 100, text: '相关人物', type: 'string', flex: true, colClass: ''},
                  {width: 100, text: '相关物品', type: 'string', flex: true, colClass: ''},
                  {width: 60, text: '评分', type: 'number', flex: false, colClass: 'text-center text-important'},
                  {sort: false, width: 'auto', text: '操作', type: 'string', flex: false, colClass: ''},
              ],
              rows: []
          };

          for (var i = 0; i < rowsCount; i++)
          {
              var row = {checked: Math.random() > 0.9, data:
              [
                  start + i + 101000,
                  now.format('yyyy-MM-dd hh:mm:ss'),
                  rooms[Math.floor(Math.random()*rooms.length)],
                  peoples[Math.floor(Math.random()*peoples.length)],
                  events[Math.floor(Math.random()*events.length)],
                  eventsTypes[Math.floor(Math.random()*eventsTypes.length)],
                  descs[Math.floor(Math.random()*descs.length)],
                  peoples[Math.floor(Math.random()*peoples.length)],
                  tools[Math.floor(Math.random()*tools.length)],
                  Math.floor(Math.random()*100)/10,
                  "<a href='###'><i class='icon-ok-sign'></i></a> &nbsp; <a href='###' class='text-danger'><i class='icon-trash'></i></a> "
              ]};
              data.rows.push(row);
              now = new Date(now.getTime() - (Math.random()*1000*60*60));
          };

          return data;
      },
      calDataGenerater = function(count)
      {
          var data =
          {
              calendars:
              {
                  success: {color: '#229f24'},
                  warning: {color: '#e48600'},
                  danger: {color: '#d2322d'},
                  info: {color: '#39b3d7'},
                  important: {color: '#81511c'},
                  special: {color: '#8957a1'}
              },
              events: []
          };
          for (var i = count - 1; i >= 0; i--)
          {
              data.events.push(calEventGenerater());
          }

          return data;
      };
  $(function()
  {
    $('.datatable').each(function()
    {
        var $this = $(this);
        $this.datatable({fixedLeftWidth: '50%', fixedRightWidth: '25%', data: dtDataGenerater($this.data('rows') || 5)});
    });

    $('.calendar').each(function()
    {
        var $this = $(this);
        var data = calDataGenerater($this.data('exampleCount') || 400);
        $this.calendar({data: data, clickEvent: function(e)
        {
            console.log(e);
            $.messager.show('您点击了 <strong>' + e.event.title + '</strong>');
        }, beforeChange: function(e)
        {
            if(e.change === 'start')
            {
                $.messager.show('起始时间更改为 ' + e.to.format('yyyy年MM月dd日 hh:mm'));
            }
        }});
    });
  });
  </script>

<script src="http://s95.cnzz.com/stat.php?id=1253026255&web_id=1253026255"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-53781622-1', 'auto');
  ga('send', 'pageview');
</script>
</body>
</html>
